<script lang="ts" setup>
import { Bell, ArrowDown, Lock, User, Operation, Message } from '@element-plus/icons-vue'
</script>

<template>
  <el-dropdown>
    <span class="el-dropdown-link">
      <div class="user">
        <img src="../../assets/avatar.jpg" alt="">
        <span class="nackname">给你奶儿瓶偷了</span>
      </div>
      <el-icon class="arrowdown">
        <ArrowDown />
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item><el-icon>
            <Lock />
          </el-icon> 修改密码 </el-dropdown-item>
        <el-dropdown-item divided><el-icon>
            <Message />
          </el-icon> 编辑信息 </el-dropdown-item>
        <el-dropdown-item divided><el-icon>
            <User />
          </el-icon> 退出登录 </el-dropdown-item>
        <el-dropdown-item divided><el-icon>
            <Operation />
          </el-icon> 更多设置 </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<style lang="scss" scoped>
.el-dropdown-link {
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: .5s;

  &:hover {
    color: #7b7bec;
  }

  &:focus-visible {
    outline: none;
    outline: none;
  }
}
</style>